<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="../css/student.css">
<link rel="stylesheet" href="../css/header.css">

<body style="background: url('../img/bg-min.jpg');background-size: cover;">
    <div id="app5">
        <div class="header">
            <div class="logo">
                <h1>学生课程管理系统</h1>
            </div>
            <el-menu class="el-menu-nav" mode="horizontal" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">个人信息</template>
                    <el-menu-item @click="toMember">{{userName}}</el-menu-item>
                </el-submenu>
            </el-menu>
            <div class="line"></div>
        </div>
        <div class="main">
            <div class="leftMenu" style="width: 145px;">
                <el-row class="tac" style="width: 145px;">
                    <el-menu default-active="3" class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1" @click="selectCurseList">
                            <span slot="title">选课列表</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="tostudentSelectedSubject">
                            <span slot="title">已选列表</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="toMySubject">
                            <span slot="title">课程表</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="toStudentInfo">
                            <span slot="title">个人信息</span>
                        </el-menu-item>
                    </el-menu>
                </el-row>
            </div>
            <div class="rightMenu subject-state">
                <div style="margin: 10px;">
                    <el-date-picker v-model="value1" type="week" @change="chooseWeek" format="yyyy 第 WW 周"
                        placeholder="选择周">
                    </el-date-picker>
                </div>
                <div class="table-wrapper">
                    <div class="tabel-container">
                        <table class="subTable">
                            <thead class="subThead">
                                <tr class="subThr">
                                    <th class="subTh">时间</th>
                                    <th class="subTh" v-for="(weekNum, weekIndex) in 7"
                                        :key="weekIndex">
                                        {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
                                </tr>
                            </thead>
                            <tbody class="subTbody">
                                <tr class="subTr" v-for="(lesson, lessonIndex) in classTableData.lessons"
                                    :key="lessonIndex">
                                    <td class="subTd">
                                        <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
                                        <p class="period">{{ lesson }}</p>
                                    </td>

                                    <td class="subTd" v-for="(course, courseIndex) in classTableData.courses"
                                        :key="courseIndex">
                                        {{classTableData.courses[courseIndex][lessonIndex].subject_name || '-'}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    var app5 = new Vue({
        el: '#app5',
        data: {
            url:'http://127.0.0.1:8080',
            userName: "",
            classTableData: {},
            value1: null
        },
        mounted: function () {
            var today = new Date().getDay();
            if (today == 0) today = 7;
            this.value1 = new Date().getTime() - (today-1) * 86400 * 1000;
            this.chooseWeek();
            this.userName = window.localStorage.getItem("userName")
        },
        methods: {
            queryMySubject: function () {

            },
            toMember: function () {
                window.location.href = "studentInfo.html"
            },
            chooseWeek: function () {
                var _this = this;
                let week1 = new Date(this.value1).getTime() || "";
                let week7 = new Date(this.value1).getTime() + 86400 * 6 * 1000 || "";
                week1 = new Date(week1).toISOString().substring(0,10);
                week7 = new Date(week7).toISOString().substring(0,10);
                axios.get(this.url + '/course/schedule', {
                    params: {
                        student_id: localStorage.getItem("creator"),
                        start_date: week1,
                        end_date: week7
                    }
                }).then(function (res) {
                    if (res.data.msg == 'success') {
                        res = res.data;
                        _this.classTableData = res.obj
                    }
                })
            },
            selectCurseList: function () {
                window.location.href = "selectCurseList.html"
            },
            toMySubject: function () {
                window.location.href = "mySubject.html"
            },
            tostudentSelectedSubject: function () {
                window.location.href = "studentSelectedSubject.html"
            },
            toStudentInfo: function () {
                window.location.href = "studentInfo.html"
            },
            digital2Chinese(num, identifier) {
                const character = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
                return identifier === 'week' && (num === 6) ? '日' : character[num];
            },
            //时间戳转换    
            formatDate: function (date) {
                var date = new Date(date);
                var YY = date.getFullYear() + '-';
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                return YY + MM + DD
            },
        }
    });
</script>

</html>
